<template>
  <el-row class="tac">
    <el-col>
      <div class="home">
        <el-container>
          <el-aside width="18%">
            <Aside />
          </el-aside>
          <el-container>
            <el-header style="text-align: right; font-size: 12px">
              <Header />
            </el-header>
            <el-main>
              <Index />
            </el-main>
          </el-container>
        </el-container>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import Aside from "../components/home/Aside";
import Header from "../components/home/Header";
import Index from "../components/home/Index";

export default {
  name: "Home",
  components: {
    Aside,
    Header,
    Index,
  },
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    toLogin() {
      this.$router.push("/login");
    },
  },
};
</script>

<style lang="sass" scoped>
.el-header, .el-footer
  background-color: #B3C0D1
  color: #333
  // text-align: center
  height: 60px
  line-height: 60px

.el-aside
  // width: 100%
  background-color: #32323A
  // color: #333
  // text-align: center
  // line-height: 200px
  height: 734px
.el-main
  background-color: #E9EEF3
  color: #333
body > .el-container
  margin-bottom: 40px
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside
  line-height: 260px
.el-container:nth-child(7) .el-aside
  line-height: 320px
</style>
